<template>
  <div class="page">
    <div class="content">
      <div class="top"></div>
      <div class="cont">
        <div class="from-cont">
          <form id="dt-/static/depesit/-cont" action="" novalidate role="form">
            <div class="dt-desc">
              <div class="dt-desc-left">
                <span v-if="!is_payment" class="iconfont dt-icon icon-icon_safety" />

                <span
                  v-else
                  class="iconfont dt-icon"
                  :class="{
                    'icon-icon_roundclose': info.status != 1,
                    'icon-icon_safety': info.status == 1,
                  }"
                />
              </div>
              <div class="dt-desc-right">
                <p class="dt-desc-title" v-if="!is_payment">
                  {{ form_type == 2 ? "拼团成功" : "预约成功" }}
                </p>
                <p class="dt-desc-title" v-else>
                  <template v-if="form_type == 2">
                    {{ info.status == 1 ? "拼团成功" : "支付失败" }}
                  </template>
                  <template v-else>
                    {{ info.status == 1 ? "预约成功" : "支付失败" }}
                  </template>
                </p>

                <p class="dt-desc-sm">
                  {{ info.status == 1 ? "感谢您的购买" : "感谢您的支持" }}
                </p>
              </div>
            </div>
            <div class="dt-suc-title shadow-lg">
              <div class="dt-suc_cont">
                <div class="dt-form shadow-lg">
                  <div class="dt-form-row2" v-if="is_payment">
                    <div class="dt-form-row-rmb">￥</div>
                    <div class="dt-form-row-money">
                      {{ info.dep_amount | toFixed }}
                    </div>
                  </div>
                  <div class="dt-form-row" v-if="(info.status == 1 || !is_payment) && customer.user_id">
                    <div class="dt-form-row-cont" style="text-align: center">
                      <long-touch-wechat :image="[4, 5].includes(customer.contact_type)" :qrcode="qrcode" @callback="adBehavior('copy')" />
                    </div>
                    <div class="dt-form-row-title prompt-text" style="color: red; font-size: 16px; text-align: center">专属客服微信 (长按添加好友)</div>
                  </div>
                  <template v-if="is_payment">
                    <div class="dt-form-feng"></div>
                    <div class="dt-form-row">
                      <div class="dt-form-row-title">订单号</div>
                      <div class="dt-form-row-cont dt-order-id">
                        {{ info.order_id }}
                      </div>
                    </div>
                    <div class="dt-form-row" v-if="info.status == 1">
                      <div class="dt-form-row-title">支付日期</div>
                      <div class="dt-form-row-cont dt-order-pay-date">
                        {{ info.pay_date }}
                      </div>
                    </div>
                    <div class="dt-form-row">
                      <div class="dt-form-row-title">支付方式</div>
                      <div class="dt-form-row-cont dt-order-pay-type">
                        {{ info.pay_type }}
                      </div>
                    </div>
                    <div class="dt-form-row">
                      <div class="dt-form-row-title">支付状态</div>
                      <div class="dt-form-row-cont dt-order-pay-stauts">
                        {{ info.status == 1 ? "已支付" : "订单未支付或在处理中" }}
                      </div>
                    </div>
                    <!-- <div class="dt-form-row">
										<div class="dt-form-row-title">专属客服</div>
										<div class="dt-form-row-cont dt-order-user"></div>
									</div> -->
                  </template>
                </div>
                <div class="dt-copy" v-if="info.status == 1">请截图发给您的专属客服</div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import LongTouchWechat from "@/components/long-touch-wechat";
import includeJs from "@/utils/include-js";
import tpl from "@/mixins/tpl";
import { on, off } from "@/utils/dom";
export default {
  mixins: [tpl],
  components: {
    LongTouchWechat,
  },
  metaInfo: {
    title: "下定结果",
  },
  data() {
    return {
      info: {},
      is_payment: true,
      form_type: 0,
    };
  },
  computed: {
    qrcode() {
      const { contact_type, image_url, wxk_image_url, contact } = this.customer;
      if (contact_type == 4) {
        return image_url;
      }
      if (contact_type == 5) {
        return wxk_image_url;
      }
      return contact;
    },
  },
  created() {
    this.init();
    on(document, "visibilitychange", this.visibilitychange);
    // 记得销毁一些全局的的事件
    this.$once("hook:beforeDestroy", () => {
      off(document, "visibilitychange", this.visibilitychange);
    });
  },
  methods: {
    init() {
      const { tg_id, tg_type, is_payment, form_type, status } = this.$route.query;
      this.is_payment = is_payment != 0;
      this.form_type = form_type || 0;
      if (this.is_payment) {
        this.getInfo();
      }
      this.getTplInfo(tg_id, tg_type).then((res) => {
		
		const { title } = this.config
		const bgImage = this.getViewImg()

		try {
			wx?.miniProgram?.postMessage({
				data: {
					title: title, bgImage: bgImage
				}
			 })
		} catch {}

        if (status != "TRADE_SUCCESS") return;
        let isSome = this.behaviorList.some((v) => v.behavior_order);
        if (isSome) {
          this.behavior("order");
          return;
        }
        this.$nextTick(() => {
          includeJs.exec(`gdt('track', 'COMPLETE_ORDER', {'key1': 'value1', 'key2': 'value2'});`);
        });
      });
      this.getCus(tg_id, tg_type);
    },
    visibilitychange() {
      if (document.visibilityState == "visible") {
        // document.title = "页面可见";
        console.log("页面可见");
        if (this.is_payment) {
          this.getInfo();
        }
        //do something
      }
      if (document.visibilityState == "hidden") {
        // document.title = "页面不可见";
        console.log("页面不可见");
        //do something else
      }
    },
    async getInfo() {
      const { merOrderId } = this.$route.query;
      if (!merOrderId) return;
      const data = await this.$api.getDepositData({
        merOrderId: merOrderId.substring(4),
      });
      if (data.status != 1) {
        // setTimeout(() => {
        //   this.getInfo();
        // }, 2000);
      }
      this.info = data;
    },
	getViewImg() {
		const imageArr = this.views.find((v) => v?.type == 'image')
		return imageArr?.options?.images[0]?.url ?? ''
	}
  },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/pay.scss";
.prompt-text {
  width: 318px;
  // height: 62rpx;
  animation-name: likes; // 动画名称
  animation-direction: alternate; // 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
  animation-timing-function: linear; // 动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束；
  animation-delay: 0s; // 动画延迟时间
  animation-iteration-count: infinite; //  动画播放次数，infinite：一直播放
  animation-duration: 1s; // 动画完成时间
}

@keyframes likes {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(0.85);
  }

  75% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}
</style>
